<template>
	<view class="index-wrap">
		<view class="index-top">
			<image src="../../static/imges/bg_message_top@2x.png" class="index-top-message"></image>
			<view class="index-top-message-word">早上好，有问题请点这里~</view>
			<view class="index-top-info">
				<image src="../../static/imges/icon_home_info@2x.png" class="index-top-logo" @click="informationJump"></image>
				<image src="../../static/imges/icon_home_set_up@2x.png" class="index-top-logo" @click="setUpJump"></image>
				<view class="index-redDot"></view>
			</view>
		</view>
		
		<view class="index-shop" v-if="unlockShop">
			<image src="../../static/icon_shop_logo.png" class="index-shop-logo"></image>
			<view class="index-shop-word">
				<view class="index-shop-title">海王星辰绿色金山店</view>
				<view class="index-shop-terminal">终端号：000004</view>
				<view class="index-shop-bottom">
					<view class="index-shop-quantity">
						今日订单：<view>112</view>
					</view>
					<view class="index-shop-line"></view>
					<view class="index-shop-quantity">
						本周订单：<view>712</view>
					</view>
				</view>
			</view>
		</view>
		<view class="index-shop" v-if="!unlockShop">
			<image src="../../static/icon_shop_logo.png" class="index-shop-logo1"></image>
			<view class="index-shop-word1">
				<view class="index-shop-title">海王星辰绿色金山店</view>
				<view class="index-shop-bottom1">
					<view class="index-shop-number">终端号：000004</view>
					<image src="../../static/imges/btn_click_on_the_lock@2x.png" class="index-shop-btnlogo" @click="clickUnlock"></image>
				</view>
			</view>
		</view>
		
		<view class="index-item">
			<view class="index-item-list"
			v-for="(item,index) in list"
			:key="index"
			@click="goSpecific($event, item.url)"
			>
				<image :src="item.logo" class="index-list-logo"></image>
				<view class="index-list-title">{{item.name}}</view>
			</view>
		</view>
		
		<view class="index-click">
			<view class="index-click-item" @click="scarCodeJump">
				扫码补货
				<view class="index-redDot"></view>
			</view>
			<view class="index-click-itema" @click="untieJump">
				解锁商品
				<view class="index-redDot"></view>
			</view>
		</view>
		
		<view class="index-notice">
			<view class="index-notice-word">提示纸条</view>
			<image src="../../static/imges/bg_notice@2x.png" class="index-notice-logo" @click="openPopup()"></image>
		</view>
		
		<view class="index-title-wrap">
			<view class="index-title">
				<view class="index-title-word">药品概览 6</view>
				<view class="index-title-search">
					<input type="text" placeholder="请输入搜索药品名称" class="index-title-inp"/>
					<image src="../../static/imges/icon_list_search@2x.png" class="index-title-search-logo"></image>
				</view>
			</view>
		</view>
		
		<view class="index-list">
			<view class="category-wrapper">
				<!-- 左边导航栏 -->
				<scroll-view :scroll-y="true" class="left-wrapper" :scroll-top="left_scroll" :style="{ height: listHeight + 'rpx' }">
					<view class="left-content" >
						<view class="left-content-list"
						v-for="(item,index) in floorList" 
						:key="index"
						@click="chooseItem(index)"
						:class="wordIndex== index?'index-left-clicklist':'left-content-list'">
							<view class="left-content-word" >{{item.name}}</view>
						</view>
					</view>
				</scroll-view>
				<!-- 右边内容 -->
				<view class="right-wrapper">
					<view class="product-wrapper">
						<view class="index-right-list">
							<view class="index-right-head">
								<image src="../../static/imges/icon_add_goods_picute@2x.png" class="index-right-logo"></image>
								<view class="index-right-floor">114-1-12</view>
							</view>
							<view class="index-right-title">扫码上架药品</view>
							<image src="../../static/imges/icon_scar_drug@2x.png" class="index-core-logo"></image>
						</view><view class="index-right-list">
							<view class="index-right-head">
								<image src="../../static/imges/icon_add_goods_picute@2x.png" class="index-right-logo"></image>
								<view class="index-right-floor">114-1-12</view>
							</view>
							<view class="index-right-title">扫码上架药品</view>
							<image src="../../static/imges/icon_scar_drug@2x.png" class="index-core-logo"></image>
						</view><view class="index-right-list">
							<view class="index-right-head">
								<image src="../../static/imges/icon_add_goods_picute@2x.png" class="index-right-logo"></image>
								<view class="index-right-floor">114-1-12</view>
							</view>
							<view class="index-right-title">扫码上架药品</view>
							<image src="../../static/imges/icon_scar_drug@2x.png" class="index-core-logo"></image>
						</view><view class="index-right-list">
							<view class="index-right-head">
								<image src="../../static/imges/icon_add_goods_picute@2x.png" class="index-right-logo"></image>
								<view class="index-right-floor">114-1-12</view>
							</view>
							<view class="index-right-title">扫码上架药品</view>
							<image src="../../static/imges/icon_scar_drug@2x.png" class="index-core-logo"></image>
						</view><view class="index-right-list">
							<view class="index-right-head">
								<image src="../../static/imges/icon_add_goods_picute@2x.png" class="index-right-logo"></image>
								<view class="index-right-floor">114-1-12</view>
							</view>
							<view class="index-right-title">扫码上架药品</view>
							<image src="../../static/imges/icon_scar_drug@2x.png" class="index-core-logo"></image>
						</view><view class="index-right-list">
							<view class="index-right-head">
								<image src="../../static/imges/icon_add_goods_picute@2x.png" class="index-right-logo"></image>
								<view class="index-right-floor">114-1-12</view>
							</view>
							<view class="index-right-title">扫码上架药品</view>
							<image src="../../static/imges/icon_scar_drug@2x.png" class="index-core-logo"></image>
						</view><view class="index-right-list">
							<view class="index-right-head">
								<image src="../../static/imges/icon_add_goods_picute@2x.png" class="index-right-logo"></image>
								<view class="index-right-floor">114-1-12</view>
							</view>
							<view class="index-right-title">扫码上架药品</view>
							<image src="../../static/imges/icon_scar_drug@2x.png" class="index-core-logo"></image>
						</view><view class="index-right-list">
							<view class="index-right-head">
								<image src="../../static/imges/icon_add_goods_picute@2x.png" class="index-right-logo"></image>
								<view class="index-right-floor">114-1-12</view>
							</view>
							<view class="index-right-title">扫码上架药品</view>
							<image src="../../static/imges/icon_scar_drug@2x.png" class="index-core-logo"></image>
						</view><view class="index-right-list">
							<view class="index-right-head">
								<image src="../../static/imges/icon_add_goods_picute@2x.png" class="index-right-logo"></image>
								<view class="index-right-floor">114-1-12</view>
							</view>
							<view class="index-right-title">扫码上架药品</view>
							<image src="../../static/imges/icon_scar_drug@2x.png" class="index-core-logo"></image>
						</view><view class="index-right-list">
							<view class="index-right-head">
								<image src="../../static/imges/icon_add_goods_picute@2x.png" class="index-right-logo"></image>
								<view class="index-right-floor">114-1-12</view>
							</view>
							<view class="index-right-title">扫码上架药品</view>
							<image src="../../static/imges/icon_scar_drug@2x.png" class="index-core-logo"></image>
						</view><view class="index-right-list">
							<view class="index-right-head">
								<image src="../../static/imges/icon_add_goods_picute@2x.png" class="index-right-logo"></image>
								<view class="index-right-floor">114-1-12</view>
							</view>
							<view class="index-right-title">扫码上架药品</view>
							<image src="../../static/imges/icon_scar_drug@2x.png" class="index-core-logo"></image>
						</view>
						
						<view class="index-commodity-list">
							<view class="index-commodity">
								<view class="index-commodity-head">
									<image src="../../static/icon_logo.png" class="index-commodity-logo"></image>
									<view class="index-commodity-floor">114-1-12</view>
								</view>
								<view class="index-commodity-writing">
									<view class="index-commodity-name">999感冒灵颗粒</view>
									<view class="index-commodity-center">
										<view class="index-commodity-amount">￥19.9</view>
										<view class="index-commodity-surplus">可售商品数量 2</view>
									</view>
									<view class="index-commodity-unfold" v-if="!ExpandContract" @click="clickExpand">查看详细信息</view>
									<view class="index-commodity-unfold" v-if="ExpandContract" @click="clickExpand">收起</view>
								</view>
							</view>
							<view class="index-commodity-bottom" v-if="ExpandContract">
								<view class="index-commodity-word">
									<view class="index-commodity-title">商品编码</view>
									<view class="index-commodity-end">6973259860067</view>
								</view>
								<view class="index-commodity-word">
									<view class="index-commodity-title">批次号</view>
									<view class="index-commodity-end">2020年12月06日</view>
								</view>
								<view class="index-commodity-word">
									<view class="index-commodity-title">有效期至</view>
									<view class="index-commodity-end">2022年11月</view>
								</view>
								<view class="index-commodity-money">
									<view class="index-commodity-rice">
										<view class="index-commodity-script">美团售价</view>
										<view class="index-commodity-script">109.5</view>
									</view>
									<view class="index-commodity-rice">
										<view class="index-commodity-script">饿了么售价</view>
										<view class="index-commodity-script">109.5</view>
									</view>
								</view>
							</view>
						</view>
						
					</view>
				</view>
			</view>
		</view>
		
		<uni-popup ref="popup" type="center">
			<view class="popup-content">
				<view class="popup-content-title">提示</view>
				<view class="popup-content-word1">确定要进行打印机小票补货</view>
				<view class="popup-content-word1">（一次只能补一卷）</view>
				<view class="popup-content-word2">47 e:/哈下人过里在小到大么子后嘻十连续不干胶热敏打印纸57*40 57*30 57x50台式便携式标签价格食品打价纸 不间断带背胶热敏纸58mm收款标签贴</view>
				<view class="popup-content-word3">小票网购链接仅供参考</view>
				<view class="popup-content-chooise">
					<view class="popup-content-cancel" @click="closePopup()">取消</view>
					<view class="popup-content-parting"></view>
					<view class="popup-content-sure" @click="closePopup()">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni/uni-popup/uni-popup.vue';
	import uSkeleton from '@/components/u-skeleton/u-skeleton.vue';
	export default {
		components: {
			uniPopup,
			uSkeleton
		},
		data() {
			return {
				list: [
					{ logo: require("../../static/imges/icon_home_binding_drugs2@2x.png"), name: '药品上架', url: '/pages/superior/superior'},
					{ logo: require("../../static/imges/icon_home_package@2x.png"), name: '药品价格管理', url: '/pages/manage/manage'},
					{ logo: require("../../static/imges/icon_home_stock_taking2@2x.png"), name: '库存盘点', url: '/pages/replenish/replenish'},
					{ logo: require("../../static/imges/icon_home_stock_taking@2x.png"), name: '打包袋管理' }
				],
				floorList: [
					{ name: '层114' },
					{ name: '层114' },
					{ name: '层114' },
					{ name: '层114' }
				],
				wordIndex: 0,
				unlockShop: false,
				ExpandContract: false,
				swiperHeight: 0,
				listHeight: 1150, //列表高度
			}
		},
		onLoad() {

		},
		methods: {
			//页面初始化
			init() {
				let systemInfo = uni.getSystemInfoSync();
				this.windowHeight = systemInfo.windowHeight;
				this.windowWidth = systemInfo.windowWidth;
			
				this.listHeight = this.windowHeight * (750 / this.windowWidth) - 220;
				this.$nextTick(() => {
					this.getHeightList();
				});
			
				this.findByTerminalNo();
				this.terminalGoodsCategory();
				this.terminalpageByCategory();
				this.sellerQualification();
			},
			closePopup() {
				this.$refs.popup.close();
			},
			openPopup() {
				this.$refs.popup.open();
			},
			chooseItem(index) {
				this.wordIndex = index
			},
			clickExpand() {
				this.ExpandContract = !this.ExpandContract
			},
			clickUnlock() {
				this.unlockShop = !this.unlockShop
			},
			// 跳转扫码补货
			scarCodeJump() {
				uni.navigateTo({
					url: '/pages/scarCode/scarCode'
				});
			},
			// 跳转设置页
			setUpJump() {
				uni.navigateTo({
					url: '/pages/setUp/setUp'
				})
			},
			// 跳转解锁商品
			untieJump() {
				uni.navigateTo({
					url: '/pages/untie/untie'
				})
			},
			// 跳转消息页
			informationJump() {
				uni.navigateTo({
					url: '/pages/information/information'
				})
			},
			// 跳转每项测试
			goSpecific(e, url) {
				uni.navigateTo({
					url: url
				});
			},
		}
	}
</script>

<style lang="less">
	@import './index.less';
</style>
